<template>
    <div class="blk " :class="parentIndex == 1 ? '' : 'f-fr'">
        <TitleBar :title="title" :hasTabs="hasTabs" :titleType="titleType" :isTitleDot="isTitleDot" :isMore="isMore" />
        <ul class="m-plylist " :class="parentIndex == 1 ? 'toplist' : 'toplist-r'">
            <li class="itm" v-for="(item, index) in itemList" key="index" :class="index % 2 == 0 ? '' : 'bg'">
                <div class="rank s-fc4 f-fl" v-if="parentIndex != 1">
                    <em class="red f-fs1">{{ index + 1 < 10 ? '0' + (index + 1) : (index + 1) }}</em>
                            <span class="u-rnk u-rnk-up f-ff0">
                                <i class="u-icn" :class="item.preIcon"></i>
                                {{ item.rankNum }}
                            </span>
                </div>
                <a class="cvr u-cover u-cover-tiny f-fl" title="播放">
                    <img :src="item.imgUrl" :alt="item.name">
                    <i class="ply f-pa f-dn"></i>
                </a>
                <div class="cnt f-fl">
                    <h3 class="f-thide">
                        <a :href="item.route" class="s-fc1 f-fw0" title="program-name">{{ item.name }}</a>
                    </h3>
                    <p class="f-thide">
                        <a :href="item.subRoute" class="s-fc4" title="program-author">{{ item.subName }}</a>
                    </p>
                </div>
                <span class="hot u-hot f-fl" v-if="parentIndex != 1">
                    <i :style="{ width: item.progressWidth + '%' }">
                        <i></i>
                    </i>
                </span>
                <a v-else href="/discover/djradio/category?id=2" class="tag u-type">音乐播客</a>
            </li>
        </ul>
    </div>
</template>
<script setup>
import TitleBar from '@/components/TitleBar.vue';
defineProps({
    "title": String,
    "hasTabs": Boolean,
    "titleType": Number,
    "isTitleDot": Boolean,
    "isMore": Boolean,
    "itemList": Array,
    "parentIndex": Number
})
</script>
<style lang="scss" scoped>
.blk {
    width: 426px;

    .toplist, .toplist-r {
        height: 600px;
        border: 1px solid #e2e2e2;
        border-top: none;

        .tag{
            margin: 1px 0 0 10px;
        }

        .itm {
            width: 424px;
            height: 40px;
            padding: 10px 0;
            line-height: 40px;
            float: left;
            background: #fff;

            &.bg {

                background: #f7f7f7;
            }


            &:hover {
                background: #eee;

                .cvr {
                    .ply {
                        display: block;
                    }
                }
            }



            .rank {
                width: 47px;
                margin: 6px 0 0 0;
                text-align: center;
                line-height: normal;

                .red {
                    color: #da4545;
                }

                em {
                    display: block;
                    width: 100%;
                    text-align: center;
                }

                .u-rnk-up {
                    color: #ba2226;
                }

                .u-rnk {
                    line-height: normal;
                    font-size: 10px;

                    i {
                        margin: -1px 2px 0 0;
                        vertical-align: middle;
                    }

                }
            }
        }

        .cvr {
            margin-left: 20px;
        }

        .u-cover {
            position: relative;
            display: block;

            img {
                display: block;
                width: 100%;
                height: 100%;
            }
        }

        .u-cover-tiny {
            width: 40px;
            height: 40px;

            .ply {
                position: absolute;
                display: none;
                width: 22px;
                height: 22px;
                top: 50%;
                left: 50%;
                overflow: hidden;
                margin: -11px 0 0 -11px;
                background-position: 0 -85px;
            }
        }

        .cnt {
            width: 254px;
            margin: 1px 0 0 10px;
            line-height: 20px;
        }

        .hot {
            margin-top: 16px;
        }

        .u-hot {
            display: block;
            position: relative;
            width: 100px;
            background-position: 0 -240px;
            line-height: normal;

            &,
            i {
                display: block;
                height: 8px;
            }

            i {
                overflow: hidden;
                padding: 0 4px;
                background-position: right -318px;

                i {
                    margin-left: -4px;
                    padding: 0 0 0 4px;
                    background-position: 0 -304px;
                }
            }
        }


    }

    .toplist-r {
        .cvr {
            margin-left: 0;
        }

        .cnt {
            width: 208px;
        }
    }
}
</style>